<template>
  <div class="ui-flex-column item-margin0 scroll-wrap form-wrap">
    <el-form ref="form" :model="form" label-width="0">
      <div class="left-title">
        高级查询
        <el-checkbox label="全部" v-model="isAreaSearch" style="float: right"></el-checkbox>
      </div>
      <el-form-item v-if="!isAreaSearch" class="aside-picker">
        <city-picker v-model="areaSelected" :isStreet="true" :size="'small'"></city-picker>
      </el-form-item>
      <div class="ui-flex" style="align-items: center">
        <el-form-item style="margin-bottom: 0">
          <el-input class="ui-flex_item aside-searchInput" size="small" placeholder="请输入关键词" v-model="form.keyword">
            <i v-if="form.keyword != ''" slot="suffix" @click="form.keyword = ''" class="el-input__icon el-icon-close"></i>
            <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button>
          </el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="ui-flex_item scroll-container">
      <el-tree v-if="treeShow" class="myTree" @node-click="clickEvent" :props="defaultProps" accordion node-key="key"
        highlight-current :expand-on-click-node="false" :render-content="renderContent" :default-expanded-keys="['all']"
        lazy ref="tree" :load="loadNode">
      </el-tree>
    </div>
  </div>
</template>

<script type="text/jsx">
import cityPicker from './cityPicker.vue'
import { getArea } from '../api/componentsApi/api'
export default {
  name: 'AsideSearch',
  props: ['clickEvent', 'isRoom', 'showData'],
  components: { cityPicker },
  data () {
    return {
      form: {
        type: [],
        keyword: ''
      },
      treeShow: true,
      isAreaSearch: true,
      areaSelected: [],
      searchResult: this.showData || ['all', 'estate'],
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'isLeaf'
      },
      rootNode: Object,
      rootResolve: Function
    }
  },
  watch: {
    areaSelected (val) {
      console.log(val)
    }
  },
  methods: {
    handleClick () {
      this.rootNode.childNodes = []
      this.rootResolve([{
        label: '全部小区',
        id: 0,
        key: 'all',
        type: 'all'
      }])
    },
    renderContent (h, { node, data, store }) {
      let content = <span class="tree-item-content">
        <span class="el-tree-node__label" title={node.label}>{node.label}</span></span>
      if (data.type === 'estate') {
        content = <span className="tree-item-content">
          <img src="/static/image/estate.png" class="side-tree-icon" alt="" title="小区" />
          <span class="el-tree-node__label" title={node.label}> {node.label}</span></span>
      } else if (data.type === 'alley') {
        content = <span className="tree-item-content">
          <img src="/static/image/alley.png" class="side-tree-icon" alt="" title="街巷" />
          <span class="el-tree-node__label" title={node.label}> {node.label}</span></span>
      } else if (data.type === 'building') {
        content = <span className="tree-item-content">
          <img src="/static/image/building.png" class="side-tree-icon" alt="" title="楼栋" />
          <span class="el-tree-node__label" title={node.label}> {node.label}</span></span>
      }
      return content
    },
    loadNode (node, resolve) {
      if (node.level === 0) {
        this.rootNode = node
        this.rootResolve = resolve
        return resolve([{
          label: '全部小区',
          id: 0,
          key: 'all',
          type: 'all'
        }])
      } else if (node.level > 0) {
        const type = node.data.type
        const searchData = {}
        if (node.level === 1) {
          if (!this.isAreaSearch) {
            const addr = ['provinceCode', 'cityCode', 'areaCode', 'streetCode']
            Object.keys(this.areaSelected).map((key, index) => {
              if (!this.areaSelected[index]) { searchData[addr[index]] = this.areaSelected[index] }
            })
          }
          if (this.form.keyword) {
            searchData.keyword = this.form.keyword
          }
        }
        if (node.level > 1) {
          searchData[type + 'Id'] = node.data.id
        }
        // 根据点击的节点  生成对应的请求参数
        this.loadData(searchData, this.searchResult[node.level], resolve)
      }
    },
    loadData (pd, type, callback) {
      console.log(type, 11111222, pd)
      const labelName = type === 'room' ? type + 'Number' : type + 'Name'
      getArea(type, pd).then(res => {
        console.log(111, res)
        const list = res
        const estate = []
        list.map((item, index) => {
          const items = {
            label: item[labelName],
            id: item[type + 'Id'],
            value: item[type + 'Id'],
            appEui: item.appEui,
            key: type + item[type + 'Id'],
            type: type,
            isLeaf: type === this.searchResult[this.searchResult.length - 1]
          }
          if (type === 'estate') {
            items.ysyAppKey = item.ysyAppKey
            items.ysySecret = item.ysySecret
          }
          estate.push(items)
        })
        if (type === 'estate') {
          localStorage.setItem('estateList', JSON.stringify(estate))
        }
        callback(estate)
      })
    },
    update (key, data) {
      this.$refs.tree.updateKeyChildren(key, data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-wrap {
  width: 100%;
}

.left {
  display: flex;
  width: 250px;
  margin-right: 8px;
  border: 1px solid #eee;
  padding: 0 8px;
  background-color: #fff;
}

.right {
  flex: 1;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border: solid 1px #eee;
}

.grid-content {
  border: solid 1px #eee;
  min-height: 36px;
}

.el-tree {
  padding-top: 20px;
  /*border: none;*/
  /*background: none;*/
  /*color: #fff;*/
}

.left-title {
  padding: 10px 0;
}

.item-margin0 .el-form-item {
  margin-bottom: 0 !important;
}
</style>
